<template>
  <view class="set-options">
    <view class="calendar-content">
      <view>
        <!-- 插入模式 -->
        <my-calendar
          class="uni-calendar--hook"
          :selected="selected"
          :showMonth="false"
          @change="change"
          @monthSwitch="monthSwitch"
        />
      </view>

      <view class="example-body hideOnPc">
        <button class="calendar-button" type="button" @click="open">
          打开日历
        </button>
      </view>
      <my-calendar
        ref="calendar"
        class="uni-calendar--hook"
        :clear-date="true"
        :date="info.date"
        :insert="info.insert"
        :lunar="info.lunar"
        :startDate="info.startDate"
        :endDate="info.endDate"
        :range="info.range"
        @confirm="confirm"
        @close="close"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";

const info = reactive({
  lunar: true,
  range: true,
  insert: false,  // 插入模式
});
const selected = ref([]);
onMounted(() => {
  setTimeout(() => {
    info.date = getDate(new Date(), -30).fullDate;
    info.startDate = getDate(new Date(), -60).fullDate;
    info.endDate = getDate(new Date(), 30).fullDate;
    selected.value = [
      {
        date: getDate(new Date(), -3).fullDate,
        info: "打卡",
      },
      {
        date: getDate(new Date(), -2).fullDate,
        info: "签到",
        data: {
          custom: "自定义信息",
          name: "自定义消息头",
        },
      },
      {
        date: getDate(new Date(), -1).fullDate,
        info: "已打卡",
      },
      {
        date: "2025-10-22",
        info: "打卡",
      },
    ];
  }, 2000);
});

const getDate = (date, AddDayCount = 0) => {
  if (!date) {
    date = new Date();
  }
  if (typeof date !== "object") {
    date = date.replace(/-/g, "/");
  }
  const dd = new Date(date);

  dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期

  const y = dd.getFullYear();
  const m =
    dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
  const d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
  return {
    fullDate: y + "-" + m + "-" + d,
    year: y,
    month: m,
    date: d,
    day: dd.getDay(),
  };
};
const calendar = ref(null);
const open = () => {
  calendar.value.open();
};
const close = () => {
  console.log("弹窗关闭");
};
const change = (e) => {
  console.log("change 返回:", e);
  // 模拟动态打卡
  // if (info.selected.length > 5) return;
  const newObj = {
    date: e.fulldate,
    info: "打卡",
  };

  selected.value = [...selected.value, newObj];
  console.log("change 模拟动态打卡:", selected.value);
};
const confirm = (e) => {
  console.log("confirm 返回:", e);
};
const monthSwitch = (e) => {
  console.log("monthSwitchs 返回:", e);
};
</script>

<style scoped lang="less">
.example-body {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}
.calendar-button {
  flex: 1;
  font-weight: bold;
  font-size: 32rpx;
}
</style>
